<template>
<div :class="[$style.container]">
  <div :class="[$style.header]">
    <span :class="[$style.title]">{{title}}</span>
    <span></span>
  </div>
  <div :class="[$style.body]">
    <data-table :page-data="pageData" height="calc(100vh - 48px - 42px - 40px - 40px - 20px)">
      <el-table-column prop="businessKey" label="业务编号" show-overflow-tooltip></el-table-column>
      <el-table-column prop="processDefKey" label="流程代码"></el-table-column>
      <el-table-column prop="processInstanceName" label="流程名称"></el-table-column>
      <el-table-column prop="variables.applyDoc" label="发起文件夹/文件" show-overflow-tooltip></el-table-column>
      <el-table-column prop="currentNodeName" label="当前节点"></el-table-column>
      <el-table-column prop="status" label="流程状态">
        <template #default="{row}">{{row.status | transcode('processStatus')}}</template>
      </el-table-column>
      <el-table-column prop="startTime" label="开始时间"></el-table-column>
      <el-table-column prop="endTime" label="结束时间"></el-table-column>
      <el-table-column fixed="right" label="操作" width="60">
        <template v-slot="{row}">
          <el-button type="text" size="small" @click="onView(row)">详情</el-button>
        </template>
      </el-table-column>
    </data-table>
  </div>
</div>
</template>

<script lang="ts">

import { queryRequestTasks } from '@/api/flow'
import { PageData, PageQueryParams } from '@/config/page'
import { Vue, Component, Provide, Watch, Ref, Prop } from 'vue-property-decorator'

@Component
export default class Done extends Vue {
  pageData: PageData<any> = null as any

  get title () {
    return `我的申请 (${this.pageData?.total})`
  }

  onView (row: any) {
    this.$router.push(`/flow/${row.processInstanceId}/detail`)
  }

  created () {
    const loader = (params: PageQueryParams) => {
      return queryRequestTasks(params)
    }
    this.pageData = new PageData(loader)

    this.pageData.load()
  }
}
</script>

<style lang="scss" module>
@import "~@/styles/vars.scss";

$header-height: 40px;

.container {

}

.header {
  height: $header-height;
  box-sizing: border-box;
  border-bottom: 1px solid $border-split-color;
  padding: 0 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.title {
  color: $text-heading-color;
  font-size: 14px;
}

.body {
}

</style>
